import { Button, Input, message } from 'antd';
import { request, history } from 'umi';

// import Particles from 'react-particles-js';  粒子特效
import styles from './index.less'
import { Component, ReactNode } from 'react';
// 引入本地静态资源
// import four from "../../assets/images/four.jpg"
// {/* <img src={four} alt="" /> */}


// export default class Login extends Component {
//   render() {
//     return (
//       <div>
//         <h1 style={{height:50}}>欢迎来到登录页</h1>
//         <Button type="primary" block><NavLink to="/">登录</NavLink></Button>
//       </div>
//     )
//   }
// }

class Login extends Component {
  state = {
    username: '',
    password: ''

  }

  // 用户名
  changeName = (e: any) => {
    const { username } = this.state
    this.setState({ username: e.target.value })
  }
  // 密码
  changePass = (e: any) => {
    const { password } = this.state
    this.setState({ password: e.target.value })
  }

  // 登录
  Loging = async () => {
    const { username, password } = this.state
    console.log(username, password)
    const res = await request('/umi/login', {
      method: 'post',
      data: {
        username: username,
        password: password
      }
    })
    console.log(res)
    if (res.err == 0) {
      message.success('登录成功即将跳转首页', 2);
      setTimeout(() => {
        history.push('/home/menuhome/versions')
      }, 1500);
    } else {

      message.error('用户信息有误 请重新输入', 3);
    }
  }


  // 回车登录
  Logs = async (e: { keyCode: number; }) => {
    // 判断是否按了回车键 回车登录
    if (e.keyCode === 13) {
      this.Loging()
    }
  }

  render() {
    return (
      <div onKeyDown={this.Logs} >
        <div className={styles.Box_log}>
          <div className={styles.form}>
            <h1>登录</h1>

            <div className={styles.username}>
              <div className={styles.text}>用户名</div>
              <Input placeholder="请输入用户名" onChange={this.changeName} className={styles.input} />
            </div>

            <div className={styles.password}>
              <div className={styles.text}>密码</div>
              <Input.Password placeholder="密码" onChange={this.changePass} className={styles.input} />
            </div>

            <Button type='primary' onClick={this.Loging} block className={styles.btn}>登录</Button>
          </div>
        </div>
      </div>
    )
  }
}




export default Login
